<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-08-06 13:28:10
 * @LastEditTime : 2020-01-11 11:22:26
 * @LastEditors  : Please set LastEditors
 -->
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../css/vant.css">
    <link rel="stylesheet" type="text/css" href="../css/base.css" />
    <script type="text/javascript" src="../script/jquery.js"></script>
    <script type="text/javascript" src="../script/layer/mobile/layer.js"></script>
    <script type="text/javascript" src="../script/vue.min.js"></script>
    <script type="text/javascript" src="../script/vant.min.js"></script>
    <script type="text/javascript" src="../script/fastclick.js"></script>
    <script type="text/javascript" src="../script/base.js"></script>
    <style type="text/css">
        .vin-tab {
            overflow: hidden;
        }

        .vin-tab>div {
            padding: 8px 0;
            text-align: center;
            width: 20%;
            float: left;
            color: #979797;
        }

        .tab-on {
            color: #2687f9 !important;
            background: #e5e5e5;
        }

        .vin-input {
            padding: 4px 15px
        }

        .vin-input-full {
            position: relative;
            width: 100%;
        }

        .data-search {
            border: 1px solid #e5e5e5;
            width: 100%;
            padding: 0 40px 0 10px;
            margin: 0;
            height: 34px;
            font-size: 13px;
            outline: none;
        }

        .vin-search {
            padding: 0 80px 0 10px;
        }

        .search-auto {
            width: 100%;
            overflow-x: auto;
            white-space: nowrap;
        }

        .search-button {
            position: absolute;
            right: 0;
            top: 0;
            width: 40px;
            height: 34px;
            line-height: 34px;
            text-align: center;
            background: #e5e5e5;
            color: #2687f9;
        }

        .search-scan {
            position: absolute;
            right: 40px;
            top: 0;
            width: 40px;
            height: 34px;
            line-height: 34px;
            text-align: center;
            color: #2687f9;
        }

        .vin-title {
            background: #e1e1e1;
            border-top: 1px solid #e5e5e5;
            border-bottom: 1px solid #e5e5e5;
        }

        .vin-title a {
            display: block;
            padding: 4px 10px;
            text-decoration: none;
            color: #000;
            font-size: 14px;
        }

        .car-row {
            padding: 6px 10px;
            border-bottom: 1px solid #e5e5e5;
            overflow: hidden;
            position: relative;
            font-size: 13px;
        }

        .car-row img {
            width: 34px;
            height: 34px;
            margin-right: 10px;
        }

        .right-letter {
            position: absolute;
            top: 0;
            right: 0;
            font-size: 12px;
            text-align: center;
            bottom: 0;
            overflow-y: scroll;
        }

        .right-letter>div {
            width: 20px;
        }

        .right-letter>div>a {
            width: 20px;
            text-decoration: none;
            color: #2687f9;
        }

        .row-h {
            line-height: 28px;
            font-size: 13px;
        }

        .search-tab {
            height: 100%;
            display: inline-block;
            padding: 4px;
        }

        .search-tab>span {
            display: inline-block;
            height: 100%;
            line-height: 24px;
            padding: 0 8px;
            background: #d9eaff;
            color: #2687f9;
            border-radius: 4px;
            font-size: 13px;
        }

        .row-full {
            position: relative;
        }

        .img-array {
            position: absolute;
            top: 0;
            bottom: 0;
            right: 14px;
            width: 30px;
            text-align: center;
            color: #9a9a9a;
            font-size: 18px;
            line-height: 41px;
        }

        .vin-final {
            padding: 0 15px;
            height: 30px;
            line-height: 28px;
            border-top: 1px solid #e5e5e5;
            border-bottom: 1px solid #e5e5e5;
            overflow-x: auto;
            width: 100%;
            white-space: nowrap;
        }

        .final-menu {
            margin-right: 15px;
            font-size: 13px;
        }

        .span-selected {
            color: #2687f9;
        }

        .item-repeat {
            overflow: hidden;
            padding: 15px;
            position: relative;
        }

        .item-img {
            float: left;
            width: 80px;
            margin-right: 10px;
        }

        .item-img img {
            width: 100%;
        }

        .item-txt {
            /* position: absolute;
            left: 100px;
            top: 15px;
            bottom: 15px;
            right: 0; */

            float: right;
            width: calc(100% - 100px);

        }

        .item-p1 span {
            font-size: 16px;
            color: #2687f9;
        }

        .item-p2 {
            font-size: 12px;
            color: #979797;
            margin: 0;
        }

        .no-img {
            margin-top: 40px;
            text-align: center;
            color: #bfbfbf;
        }

        .no-img img {
            width: 150px;
        }

        .no-img div {
            line-height: 40px;
            font-size: 16px;
            letter-spacing: 2px;
        }

        .head-fixed {
            height: 80px;
        }

        .content-r {
            height: calc(100% - 80px);
            position: relative;
        }

        .c-scroll {
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            height: 100%;
        }

        .checkbox {
            position: absolute;
            right: 15px;
            top: 15px;
        }

        .vin-final-info {
            /* padding: 0 15px; */
            /* height: 40px; */
            line-height: 32px;
            border-top: 1px solid #e5e5e5;
            overflow: hidden;
            clear: both;
            font-size: 13px;
        }

        .vin-final-info span {
            margin-right: 5px;
        }

        .vin-final-info span img {
            height: 30px;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="init-full">
            <van-nav-bar class="head" title="商品查询" left-arrow @click-left="onClickLeft">
            </van-nav-bar>
            <div class="body-no-bottom">
                <div class="content">
                    <div class="head-fixed">
                        <div class="vin-tab">
                            <div @click="changeTab(1)" :class="tabStatus==1?'tab-on':''">VIN码</div>
                            <div @click="changeTab(2)" :class="tabStatus==2?'tab-on':''">按车型</div>
                            <div @click="changeTab(3)" :class="tabStatus==3?'tab-on':''">OE号</div>
                            <div @click="changeTab(4)" :class="tabStatus==4?'tab-on':''">产品编号</div>
                            <div @click="changeTab(5)" :class="tabStatus==5?'tab-on':''">FMSI码</div>
                        </div>
                        <div class="vin-input">
                            <div class="vin-input-full" v-show="tabStatus == 2">
                                <input type="text" class="data-search" v-on:input="inputFunc" placeholder="请输入车型品牌或车系名称"
                                    v-model="searchData" v-show="level == 1" />
                                <div class="data-search" v-show="level != 1">
                                    <div class="search-auto">
                                        <div v-for="(row,index) in searchArray" class="search-tab"
                                            @click="returnSearch(index)">
                                            <span>{{row.text}}</span>
                                        </div>
                                    </div>
                                </div>
                                <div style="height: 26px;line-height: 26px;"></div>
                                <span class="search-button">查</span>
                            </div>

                            <div class="vin-input-full" v-show="tabStatus != 2">
                                <input type="text" class="data-search" :class="tabStatus==1?'vin-search':''"
                                    :placeholder="getPlaceholder()" v-model="searchData_" />

                                <!-- <span class="search-scan" @click="openScan()" v-show="tabStatus == 1">
                                    <img src="../image/scan_black.png" style="width: 30px;" />
                                </span> -->
                                <span class="search-button" @click="codeSearch(0)">查</span>

                            </div>
                        </div>
                    </div>
                    <div class="content-r">
                        <div class="no-img" v-if="isShowNoData == 1">
                            <img src="../image/no-data.png" />
                            <div>暂无数据</div>
                        </div>

                        <div class="c-scroll" v-show="tabStatus == 2">
                            <!-- 第一级-->
                            <div v-for="row in carLists"
                                v-show="row.nodeArray.length > 0 && checkNode(row) && level == 1 && !ifFinal">
                                <div class="vin-title"><a :name="row.letter">{{row.letter}}</a></div>
                                <div>
                                    <div class="car-row" v-for="item in row.nodeArray" v-show="item.isShow"
                                        @click="showNode(item)">
                                        <img :src="item.cm_brand_image_url" />
                                        <span>{{item.cm_brand}}</span>
                                    </div>
                                </div>
                            </div>
                            <!-- 第二级-->
                            <div v-for="row in detailArray" v-show="level == 2 && !ifFinal">
                                <div class="vin-title"><a>{{row.cm_factory}}</a></div>
                                <div class="row-full" v-for="item in row.cm_cars">
                                    <div class="car-row row-h" @click="showNext(row,item)">
                                        <span>{{item.cm_car}}</span>
                                    </div>
                                </div>
                            </div>
                            <!-- 第三级-->
                            <div class="row-full" v-for="row in nextArray" v-show="level == 3 && !ifFinal">
                                <div class="car-row row-h" @click="showFNext(row)">
                                    <span>{{row}}</span>
                                </div>
                            </div>
                            <!-- 第四级-->
                            <div class="row-full" v-for="row in fourArray" v-show="level == 4 && !ifFinal">
                                <div class="car-row row-h" @click="showFinNext(row)">
                                    <span>{{row.cm_displacement}}&nbsp;&nbsp;{{row.cm_fuel_type}}&nbsp;&nbsp;{{row.cm_model_year}}</span>
                                </div>
                            </div>
                            <!-- 最底级的产品列表-->
                            <div v-show="ifFinal">
                                <div class="vin-final">
                                    <span class="final-menu" v-for="(row,index) in finalArray.cats"
                                        :class="index == finalIndex?'span-selected':''"
                                        @click="finalIndex = index;getMenu(row,index)">{{row.name}}</span>
                                </div>
                                <div v-for="(part,index) in finalArray.results" v-show="index == finalIndex">
                                    <div v-for="row in part">
                                        <div class="vin-title"><a>{{row.partsku_name}}</a></div>
                                        <div>
                                            <div class="item-repeat" v-for="item in row.node">
                                                <div class="item-img"
                                                    @click="openDetailImg(item.partsku_imgs.length?item.partsku_imgs[0].image_url:'')">
                                                    <img
                                                        :src="item.partsku_imgs.length?item.partsku_imgs[0].image_url:'/upload/no.png'" />
                                                </div>
                                                <div class="item-txt">
                                                    <div class="item-p1">{{item.partsku_brand}}
                                                        <span>{{item.partsku_code}}</span>
                                                    </div>
                                                    <p class="item-p2" v-for="v in item.partsku_vals">
                                                        {{v.pro_name}}:{{v.partsku_value}}{{v.pro_unit}}
                                                    </p>

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="right-letter" v-show="level == 1 && tabStatus == 2">
                            <div v-for="row in letterArray"><a :href="'#' + row">{{row}}</a></div>
                        </div>

                        <div style="overflow-y: auto;height: 100%;" v-show="tabStatus != 2">
                            <div>
                                <div class="vin-final" v-if="finalArray_.cats">
                                    <span class="final-menu" v-for="(row,index) in finalArray_.cats"
                                        :class="index == finalIndex_?'span-selected':''"
                                        @click="finalIndex_ = index;getMenu1(row,index)">{{row.name}}</span>
                                </div>
                                <div v-for="(part,index) in finalArray_.results" v-show="index == finalIndex_">
                                    <div v-for="row in part">
                                        <div class="vin-title"><a>{{row.partsku_name}}</a></div>
                                        <div>
                                            <div class="item-repeat" v-for="item in row.node">
                                                <div class="item-img" v-if="tabStatus == 1"
                                                    @click="openDetailImg(item.partsku_imgs.length?item.partsku_imgs[0].image_url:'')">
                                                    <img
                                                        :src="item.partsku_imgs.length?item.partsku_imgs[0].image_url:'/upload/no.png'" />
                                                </div>

                                                <div class="item-img" v-if="tabStatus != 1"
                                                    @click="openDetailImg(item.partsku_imgs.length?('https://img.sopei.cn' + item.partsku_imgs[0].image_url):'')">
                                                    <img
                                                        :src="item.partsku_imgs.length?('https://img.sopei.cn' + item.partsku_imgs[0].image_url):'/upload/no.png'" />
                                                </div>
                                                <div class="item-txt">
                                                    <div class="item-p1">{{item.partsku_brand}}
                                                        <span>{{item.partsku_code}}</span>
                                                    </div>
                                                    <p class="item-p2" v-for="v in item.partsku_vals">
                                                        {{v.pro_name}}:{{v.partsku_value}}{{v.pro_unit}}
                                                    </p>

                                                </div>
                                                <div v-if="item.carmodel_remark && item.carmodel_remark.length">
                                                    <div class="vin-final-info">
                                                        <span style="margin:0;color:#979797;">适配车型：</span>
                                                        <span>{{item.carmodel_remark[0].cm_brand}}</span>
                                                        <span>{{item.carmodel_remark[0].cm_factory}}</span>
                                                        <span>{{item.carmodel_remark[0].cm_model}}</span>

                                                    </div>
                                                    <div class="vin-final-info"
                                                        style="background: #e1e1e1;padding-left:5px;color: #6d6d6d;">
                                                        <span>{{item.carmodel_remark[0].cm_model_year}}款</span>/
                                                        <span>{{item.carmodel_remark[0].cm_sales_year}}-{{item.carmodel_remark[0].cm_stop_year}}</span>/
                                                        <span>{{item.carmodel_remark[0].cm_displacement}}</span>/
                                                        <span>发动机型号：{{item.carmodel_remark[0].cm_engine_model}}</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <van-loading v-if="showLoading" />
            </div>
        </div>
    </div>
</body>

<script type="text/javascript">
    var vm, autoType, autoKey;
    var scanModule = null;
    function initKernal() {
        scanModule.initKernal({
            keyName: '2D5B23D50E370D4D9F0A',
            keyPath: 'widget://res/sqzs.lic'
        }, function (ret, err) {
            if (!ret.status) {

            }
        });
    }

    apiready = function () {
        //$('.init-full').show();
        var fromType = api.pageParam.fromType
        var photoBrowser = api.require('photoBrowser');
        scanModule = api.require('carVIN');
        if (!scanModule) {

        } else {
            initKernal();

        }


        vm = new Vue({
            el: '#app',
            data: {
                showLoading: false,
                tabStatus: 1,
                fromType: fromType,
                level: 1,
                ifFinal: false,
                carInfo: '',
                searchArray: [],
                carLists: [],
                detailArray: [],
                nextArray: [],
                fourArray: [],
                finalArray: [],
                finalArray_: [],
                finalIndex: -1,
                finalIndex_: -1,
                isShowNoData: 0,
                letterArray: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
                searchData: '',
                searchData_: '',
                tabList: []
            },
            created: function () {
                this.getTabList();
                this.getCar();
            },
            methods: {
                getTabList() {
                    var that = this;
                    FLD.nativeRequest_spvin('GetProductType', {}, function (datas) {
                        that.tabList = datas;
                        // alert(JSON.stringify(that.tabList))
                    })
                },
                changeTab(index) {
                    if (this.tabStatus != index) {
                        this.tabStatus = index;
                        this.searchData_ = '';
                        this.finalArray_ = [];
                        this.carInfo = '';
                    }
                    if (index == 2) {
                        this.isShowNoData = 0;
                    }
                },
                getCar() {
                    var that = this;
                    that.showLoading = true;
                    FLD.nativeRequest_spvin('GetBrandList', {}, function (datas) {
                        // alert(JSON.stringify(datas))
                        that.showLoading = false;
                        if (datas.status == 'ok') {
                            var totalArray = [];
                            for (var i in that.letterArray) {
                                var newArray = [];
                                var data = datas.data[1].list;
                                for (var j in data) {
                                    if (that.letterArray[i] == data[j].cm_brand_letter) {
                                        data[j].isShow = true;
                                        newArray.push(data[j]);
                                    }
                                }
                                totalArray.push({
                                    letter: that.letterArray[i],
                                    nodeArray: newArray
                                })
                            }
                            that.carLists = totalArray;
                            // alert(JSON.stringify(that.carLists))
                        } else {
                            layer.open({
                                content: datas.msg,
                                skin: 'msg',
                                time: 2
                            });
                        }

                    })
                },
                inputFunc() {
                    for (var i in this.carLists) {
                        for (var j in this.carLists[i].nodeArray) {
                            if (this.carLists[i].nodeArray[j].cm_brand.toLowerCase().indexOf(this.searchData.toLowerCase()) > -1) {
                                this.carLists[i].nodeArray[j].isShow = true;
                            } else {
                                this.carLists[i].nodeArray[j].isShow = false;
                            }
                        }
                    }
                },
                checkNode(row) {
                    var checkArray = row.nodeArray.filter(function (r) {
                        return r.isShow == true;
                    })
                    return checkArray.length;
                },
                showNode(item) {
                    var that = this;
                    that.searchArray = [{
                        id: item.cm_brand,
                        text: item.cm_brand
                    }];

                    that.showLoading = true;
                    FLD.nativeRequest_spvin('GetCarSystem', { brandName: item.cm_brand }, function (datas) {
                        if (datas.status == 'ok') {
                            that.showLoading = false;
                            $('.c-scroll').scrollTop(0);
                            that.detailArray = datas.data;
                            that.level = 2;
                            that.searchData = '';
                        } else {
                            layer.open({
                                content: datas.msg,
                                skin: 'msg',
                                time: 2
                            });
                        }

                    })
                },
                showFNext(item) {
                    var that = this;
                    that.searchArray.push({
                        id: item,
                        text: item
                    });
                    var obj = {
                        brandName: that.searchArray[0].text,
                        factoryName: that.searchArray[1].part,
                        modleName: item
                    }
                    FLD.nativeRequest_spvin('GetCarModel', obj, function (datas) {
                        if (datas.status == 'ok') {
                            that.showLoading = false;
                            $('.c-scroll').scrollTop(0);
                            that.fourArray = datas.data;
                            that.level++;
                            that.searchData = '';
                        } else {
                            layer.open({
                                content: datas.msg,
                                skin: 'msg',
                                time: 2
                            });
                        }

                    })
                },
                showFinNext(row) {
                    var that = this;
                    that.searchArray.push({
                        id: row.cm_displacement + '    ' + row.cm_fuel_type + '    ' + row.cm_model_year,
                        text: row.cm_displacement + '    ' + row.cm_fuel_type + '    ' + row.cm_model_year,
                        d: row.cm_displacement,
                        f: row.cm_fuel_type,
                        m: row.cm_model_year,
                    });
                    var obj = {
                        category_code: that.tabList[0].value,
                        brandName: that.searchArray[0].text,
                        factoryName: that.searchArray[1].part,
                        modleName: that.searchArray[2].text,
                        modelYear: row.cm_model_year,
                        displacement: row.cm_displacement,
                        fuelType: row.cm_fuel_type,
                    }
                    FLD.nativeRequest_spvin('GetProductByCarInfo', obj, function (datas) {
                        if (datas.status == 'ok') {
                            that.showLoading = false;
                            $('.c-scroll').scrollTop(0);
                            that.finalArray = {
                                cats: [],
                                results: []
                            }
                            console.log(JSON.stringify(datas))
                            that.finalArray.cats = that.tabList;



                            var data = [];
                            for (var i in datas.data) {
                                var x = 0;
                                for (var j in data) {
                                    if (datas.data[i].partsku_name == data[j].partsku_name) {
                                        x = 1;
                                        data[j].node.push(datas.data[i])
                                    }
                                }
                                if (x == 0) {
                                    data.push({
                                        partsku_name: datas.data[i].partsku_name,
                                        node: [datas.data[i]]
                                    })
                                }
                            }
                            that.finalArray.results.push(data);
                            that.finalIndex = 0;
                            that.level++;
                            that.ifFinal = true;
                            that.searchData = '';
                        } else {
                            layer.open({
                                content: datas.msg,
                                skin: 'msg',
                                time: 2
                            });
                        }

                    })
                },
                showNext(row, item) {
                    var that = this;

                    that.searchArray.push({
                        id: item.cm_car,
                        part: row.cm_factory,
                        text: item.cm_car
                    });
                    that.nextArray = item.cm_models;
                    that.level++;

                },

                openImage(item) {
                    var imageLists = item.FS_images.split(',');
                    for (var i in imageLists) {
                        imageLists[i] = 'http:' + imageLists[i];
                    }
                    photoBrowser.open({
                        images: imageLists,
                        bgColor: '#000'
                    }, function (ret) {
                        if (ret) {
                            if (ret.eventType == 'click') {
                                photoBrowser.close();
                            }
                        }
                    })
                },
                returnSearch(index) {
                    var that = this;
                    that.ifFinal = false;
                    that.searchArray.splice(index, that.searchArray.length - index);
                    that.level = that.searchArray.length + 1;
                },
                getMenu(row, index) {
                    var that = this;
                    var obj = {
                        category_code: that.tabList[index].value,
                        brandName: that.searchArray[0].text,
                        factoryName: that.searchArray[1].part,
                        modleName: that.searchArray[2].text,
                        modelYear: that.searchArray[3].m,
                        displacement: that.searchArray[3].d,
                        fuelType: that.searchArray[3].f
                    }
                    // alert(JSON.stringify(obj))
                    that.showLoading = true;
                    FLD.nativeRequest_spvin('GetProductByCarInfo', obj, function (datas) {
                        that.showLoading = false;
                        if (datas.status == 'ok') {
                            var data = [];
                            for (var i in datas.data) {
                                var x = 0;
                                for (var j in data) {
                                    if (datas.data[i].partsku_name == data[j].partsku_name) {
                                        x = 1;
                                        data[j].node.push(datas.data[i])
                                    }
                                }
                                if (x == 0) {
                                    data.push({
                                        partsku_name: datas.data[i].partsku_name,
                                        node: [datas.data[i]]
                                    })
                                }
                            }
                            that.finalArray.results[index] = data;
                        } else {
                            layer.open({
                                content: datas.msg,
                                skin: 'msg',
                                time: 2
                            });
                        }

                    })
                },
                getMenu1(row, index) {
                    var that = this;
                    var postUrl = '';
                    var parmName = {};
                    if (that.tabStatus == 1) {
                        postUrl = 'GetProductInfoByVinCode';
                        parmName = { vin: that.searchData_, category_code: that.tabList[index].value };
                    } else {
                        return;
                    }

                    that.showLoading = true;
                    FLD.nativeRequest_spvin(postUrl, parmName, function (datas) {
                        that.showLoading = false;
                        if (datas.status == 'ok') {

                            var data = [];
                            for (var i in datas.data) {
                                var x = 0;
                                for (var j in data) {
                                    if (datas.data[i].partsku_name == data[j].partsku_name) {
                                        x = 1;
                                        data[j].node.push(datas.data[i])
                                    }
                                }
                                if (x == 0) {
                                    data.push({
                                        partsku_name: datas.data[i].partsku_name,
                                        node: [datas.data[i]]
                                    })
                                }
                            }
                            that.finalArray_.results[index] = data;
                        } else {
                            layer.open({
                                content: datas.msg,
                                skin: 'msg',
                                time: 2
                            });
                        }

                    })

                },
                returnImg(img) {
                    if (!img || img.length == 0) {
                        return '../image/no-image.png';
                    } else {
                        if (Array.isArray(img)) {
                            return 'http:' + img[0];
                        } else {
                            return 'http://' + FLD.serverIP + img;
                        }

                    }
                },
                openDetailImg(img) {
                    if (!img || img.length == 0) {
                        return false;
                    } else {
                        photoBrowser.open({
                            images: [img],
                            bgColor: '#000'
                        }, function (ret) {
                            if (ret) {
                                if (ret.eventType == 'click') {
                                    photoBrowser.close();
                                }
                            }
                        })
                    }
                },
                getPlaceholder() {
                    if (this.tabStatus == 1) {
                        return '请输入17位VIN码进行查询';
                    }
                    if (this.tabStatus == 2) {
                        return '请选择车型查询';
                    }
                    if (this.tabStatus == 3) {
                        return '请输入OE号查询';
                    }
                    if (this.tabStatus == 4) {
                        return '请输入产品编号查询';
                    }
                    if (this.tabStatus == 5) {
                        return '请输入FMSI码查询';
                    }
                },
                codeSearch(index) {
                    var that = this;
                    if (!that.searchData_) {
                        layer.open({
                            content: '请输入内容',
                            skin: 'msg',
                            time: 2
                        });
                        return;
                    }
                    var postUrl = '';
                    var parmName = {};
                    that.finalArray_ = [];
                    that.finalIndex_ = 0;
                    that.carInfo = '';
                    if (that.tabStatus == 1) {
                        postUrl = 'GetProductInfoByVinCode';
                        parmName = { vin: that.searchData_, category_code: that.tabList[index].value };
                    } else if (that.tabStatus == 3) {
                        postUrl = 'GetProductByCode';
                        parmName = { code: that.searchData_.toLowerCase(), query_type: 'OEM', category_code: that.tabList[index].value };
                    } else if (that.tabStatus == 4) {
                        postUrl = 'GetProductByCode';
                        parmName = { code: that.searchData_.toLowerCase(), query_type: 'TENANT', category_code: that.tabList[index].value };
                    } else if (that.tabStatus == 5) {
                        postUrl = 'GetProductByCode';
                        parmName = { code: that.searchData_.toLowerCase(), query_type: 'INDUSTRY', category_code: that.tabList[index].value };
                    }
                    that.showLoading = true;

                    function getData() {
                        FLD.nativeRequest_spvin(postUrl, parmName, function (datas) {
                            that.showLoading = false;
                            if (datas.status == 'ok') {
                                if (that.tabStatus == 1) {
                                    $('.c-scroll').scrollTop(0);
                                    that.finalArray_ = {
                                        cats: [],
                                        results: []
                                    }
                                    that.finalArray_.cats = that.tabList;
                                    var data = [];
                                    for (var i in datas.data) {
                                        var x = 0;
                                        for (var j in data) {
                                            if (datas.data[i].partsku_name == data[j].partsku_name) {
                                                x = 1;
                                                data[j].node.push(datas.data[i])
                                            }
                                        }
                                        if (x == 0) {
                                            data.push({
                                                partsku_name: datas.data[i].partsku_name,
                                                node: [datas.data[i]]
                                            })
                                        }
                                    }
                                    that.finalArray_.results.push(data);
                                    that.finalIndex_ = 0;
                                } else {
                                    if (!datas.data.length) {
                                        if (index < that.tabList.length - 1) {
                                            index++;
                                            that.codeSearch(index);
                                        } else {
                                            that.finalArray_ = {
                                                cats: [],
                                                results: []
                                            }
                                            //测试一下
                                        }

                                    } else {
                                        $('.c-scroll').scrollTop(0);
                                        that.finalArray_ = {
                                            cats: [],
                                            results: []
                                        }
                                        that.finalArray_.cats = [that.tabList[index]];
                                        var data = [];
                                        for (var i in datas.data) {
                                            var x = 0;
                                            for (var j in data) {
                                                if (datas.data[i].partsku_name == data[j].partsku_name) {
                                                    x = 1;
                                                    data[j].node.push(datas.data[i])
                                                }
                                            }
                                            if (x == 0) {
                                                data.push({
                                                    partsku_name: datas.data[i].partsku_name,
                                                    node: [datas.data[i]]
                                                })
                                            }
                                        }
                                        that.finalArray_.results.push(data);
                                        that.finalIndex_ = 0;
                                    }
                                }


                            } else {
                                layer.open({
                                    content: datas.msg,
                                    skin: 'msg',
                                    time: 2
                                });
                            }
                        })
                    }
                    getData();

                    // } else {

                    // }
                },
                getCarInfo() {
                    var that = this;
                    FLD.nativeRequest_vin('GetCarInfoByVinCode', { vinCode: that.searchData_ }, function (datas) {
                        that.carInfo = datas;
                        var vehicle = '';
                        for (var i in datas.params) {
                            if (datas.params[i].type_name == '发动机型号') {
                                vehicle = datas.params[i].value;
                            }
                        }
                        FLD.nativeRequest_oilvin('TransmissionOil11', { carBrand: datas.brand_name, vehicle: vehicle }, function (datas) {
                            if (datas.status == 200) {
                                var data = datas.msg;
                                if (!data.length) return;
                                that.finalArray_.cats.push({
                                    value: '变速箱油'
                                })
                                that.finalArray_.results.push([{
                                    key: 999,
                                    name: '变速箱油',
                                    items: [{
                                        brand_name: '福路德',
                                        item_no: data[0].ProductName,
                                        images: data[0].PIC_Path,
                                        properties: [{
                                            name: '规格',
                                            value: data[0].ProductSpec
                                        }, {
                                            name: '单位',
                                            value: data[0].UnitName
                                        }]
                                    }]
                                }])

                            }



                        })
                    })
                },
                toggleCheckBox(item) {
                    if (typeof item.checked === 'undefined') {
                        this.$set(item, 'checked', true)
                    } else {
                        item.checked = !item.checked
                    }
                },
                openScan() {
                    var that = this;
                    that.searchData_ = '';
                    that.finalArray_ = [];
                    scanModule.openEtScanActivity(function (ret, err) {
                        if (ret.status) {
                            if (ret.evenType == 'onSuccess') {
                                that.searchData_ = ret.recogResult;
                                that.codeSearch(0);
                            }
                        } else {
                            layer.open({
                                content: '识别失败,请重新识别!',
                                skin: 'msg',
                                time: 2
                            });
                        }
                    });
                },
                openFNPhotograph() {
                    var FNPhotograph = api.require('FNPhotograph');
                    FNPhotograph.open({
                        path: 'fs://',
                        album: true,
                        quality: 'medium'
                    }, function (ret) {
                        if (ret.eventType == 'takePhoto') {
                            FNPhotograph.close();
                            var path = ret.imagePath;
                            that.disVinCode(path);
                        }
                    });
                },

                disVinCode(imagePath) {
                    var that = this;
                    that.searchData_ = '';
                    that.finalArray_ = [];
                    that.showLoading = true;
                    scanModule.disVinCode({
                        imagePath: imagePath
                    }, function (ret, err) {
                        that.showLoading = false;
                        if (ret.status) {
                            that.searchData_ = ret.data;
                            that.codeSearch(0);

                        } else {
                            layer.open({
                                content: '识别失败,请重新识别!',
                                skin: 'msg',
                                time: 2
                            });
                        }
                    });
                },
                onClickLeft() {
                    api.closeWin();
                },
                onClickRight() {
                    var nameArray = [];
                    var x = 0;
                    if (this.tabStatus == 2) {
                        for (var i in this.finalArray.results) {
                            for (var j in this.finalArray.results[i]) {
                                for (var z in this.finalArray.results[i][j].items) {
                                    if (this.finalArray.results[i][j].items[z].checked) {
                                        x = 1;
                                        nameArray.push(this.finalArray.results[i][j].items[z].item_no);
                                    }
                                }
                            }
                        }
                    } else {
                        for (var i in this.finalArray_.results) {
                            for (var j in this.finalArray_.results[i]) {
                                for (var z in this.finalArray_.results[i][j].items) {
                                    if (this.finalArray_.results[i][j].items[z].checked) {
                                        x = 1;
                                        nameArray.push(this.finalArray_.results[i][j].items[z].item_no);
                                    }
                                }
                            }
                        }
                    }
                    if (x == 0) {
                        layer.open({
                            content: '请至少选择一种商品!',
                            skin: 'msg',
                            time: 2
                        });
                        return false;
                    }
                    if (this.fromType == 0) {
                        api.openWin({
                            name: 'selling',
                            url: 'selling.html',
                            reload: true,
                            slidBackEnabled: false,
                            pageParam: {
                                historyData: null,
                                detailString: nameArray.join()
                            }
                        })
                    } else {
                        api.sendEvent({
                            name: 'vinSelected',
                            extra: {
                                detailString: nameArray.join()
                            }
                        });
                        api.closeWin();
                    }

                }
            }
        })
    };

</script>

</html>